<template>
  <scroll-view class="article" :style="[mainStyle]" scroll-y @scroll='scroll'>
    <view class="jh-row jh-align-top">
      <view class="article-main">
        <block v-for="(i,index) in textList" :key='index'>
          <jh-image :style="{width: textwidth + 'px'}" style="display: block;" :src="i.url" mode="widthFix"></jh-image>
        </block>
      </view>
      <view class="article-imgList">
        <block v-for="(i,index) in imgList" :key='index'>
          <jh-image v-if="i.type == 1" class="article-imgList-item margin-b5" :src="i.url" mode="aspectFill"
            @tap='previewImage(i)'></jh-image>
          <video v-else-if="i.type == 2" :id="'video'+index" :ref="'video'+index" class="article-imgList-item margin-b5"
            :src="i.url" @play='play($event, index)' @timeupdate='timeupdate($event, index)'
            @pause='pause($event, index)' @ended='ended($event, index)'></video>
        </block>
      </view>
    </view>
    <callService :type='serverType[menuId] || 1'></callService>
    <video v-if="imgList[video.index] && imgList[video.index].type == 2" id='picture' ref='picture'
      class="article-fixed"
      :style="{top: videoCoordinates.y + 'px', left: !videoInView && video.inPlay ? videoCoordinates.x + 'px' : '-500px'}"
      :muted='muted' :controls='false' :enable-progress-gesture='false' show-fullscreen-btn @play='picturePlay'
      @timeupdate='pictureTimeupdate' @pause='picturePause' :src="imgList[video.index].url">
    </video>
    <cover-view v-if="imgList[video.index] && imgList[video.index].type == 2" class="article-fixed"
      :style="{top: videoCoordinates.y + 'px', left: !videoInView && video.inPlay ? videoCoordinates.x + 'px' : '-500px'}"
      @touchstart="touchstart" @touchmove="touchmove">
      <view style="width: 210px;height: 120px;" @touchstart="touchstart" @touchmove="touchmove">
      </view>
    </cover-view>
    <cover-image v-if="imgList[video.index] && imgList[video.index].type == 2" @tap='closePicture'
      :style="{top: videoCoordinates.y + 'px', left: !videoInView && video.inPlay ? videoCoordinates.x + 190 + 'px' : '-500px'}"
      class="picture-close" :src="ossDomain + '/icon-close.png'"></cover-image>
  </scroll-view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import callService from '@/components/call-service/call-service'
  export default {
    components: {
      callService
    },
    props: {
      menuId: {
        type: Number | String,
        default: ''
      },
      src: {
        type: String,
        default: ''
      },
      mainStyle: {
        type: Object,
        default: ''
      }
    },
    computed: {
      ...mapState({
        sysInfo: state => state.global.systemInfo,
      }),
      textwidth() {
        let num = parseInt(this.mainStyle.width) - 210
        return num > 441 ? 441 : num
      },
      viewHeight() {
        return parseInt(this.mainStyle.height)
      }
    },
    watch: {
      menuId(val) {
        setTimeout(() => {
          this.getArticle()
        }, 0)
      },
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        textList: [],
        imgList: [],
        video: {
          index: '',
          context: null,
          inPlay: false,
          currentTime: 0,
          top: 0,
        },
        videoCoordinates: {
          x: 0,
          y: 70
        },
        videoDeviation: {
          x: 0,
          y: 0
        },
        moveStatus: true,
        picture: {
          context: null,
          inPlay: false,
          currentTime: 0
        },
        videoInView: true,
        muted: true,
        serverType: {
          1149: 2, // 基因检测
          1150: 3, // 全息影像筛查
          1151: 4, // 饮食检测
          1152: 5, // 失忆预防检测
          1153: 6, // 中医检测
          1154: 7, // 睡眠呼吸检测
          1158: 8, // 中医康复
          1159: 9, // 饮食康复
          1160: 10, // 运动健康
          1161: 11, // 再生医学康复
          1162: 12, // 睡眠障碍康复
          1157: 13, // 自助问诊
          1156: 14, // 远程问诊
        }
      }
    },
    mounted() {
      this.picture.context = uni.createVideoContext('picture')
      setTimeout(() => {
        this.getArticle()
      }, 0)
      let {
        screenHeight,
        screenWidth,
        safeArea,
        statusBarHeight
      } = this.sysInfo
      this.videoCoordinates.x = screenWidth - 240
    },
    methods: {
      getArticle() {
        let obj = {
          menu_id: this.menuId
        }
        uni.$http.getArticle(obj).then(res => {
          let data = res.data[0] || {}
          let {
            content_1,
            content_2
          } = data
          this.textList = content_1 || []
          this.imgList = content_2 || []
          if (!content_1 && !content_2) {
            uni.showToast({
              title: '暂无数据',
              icon: 'none'
            })
          }
        })
      },
      play(e, i) {
        // console.log(e);
        let videoContext = uni.createVideoContext('video' + i)
        let top = 25 + (120 + 5) * i
        if (this.video?.context) {
          if (i != this.video.index) {
            this.video.context.stop()
            this.videoInView = true
            this.video = {
              index: i,
              context: videoContext,
              inPlay: true,
              top,
              currentTime: 0
            }
            this.muted = false
          } else {
            this.video.inPlay = true
          }
        } else {
          this.video = {
            index: i,
            context: videoContext,
            inPlay: true,
            top,
            currentTime: 0
          }
        }
        setTimeout(() => {
          this.picture.context.play()
          this.muted = true
        }, 0)
      },
      pause(e, i) {
        if (this.video?.context) {
          if (i == this.video.index) {
            this.picture.context.pause()
            this.video.inPlay = false
          }
        }
      },
      ended(e, i) {
        if (this.video?.context) {
          if (i == this.video.index) {
            this.picture.context.stop()
            this.video.inPlay = false
          }
        }
      },
      picturePlay() {
        this.picture.inPlay = true
        this.picture.context.seek(this.video.currentTime + 1)
        if (!this.videoInView) {
          this.video.context.play()
        }
      },
      picturePause() {
        this.picture.inPlay = false
        if (!this.videoInView) {
          this.video.context.pause()
        }
      },
      pictureTimeupdate(e) {
        let currentTime = Number(e.detail.currentTime)
        this.picture.currentTime = e.detail.currentTime
      },
      timeupdate(e) {
        let currentTime = Number(e.detail.currentTime)
        this.video.currentTime = e.detail.currentTime
        if (Math.abs(this.picture.currentTime - currentTime) > 2) {
          this.picture.context.seek(this.video.currentTime + 1)
          console.log('强制同步');
        }
        if (!this.videoInView && !this.picture.inPlay) {
          this.picture.context.play()
        }
        // console.log('video:',this.video.currentTime);
      },
      closePicture() {
        this.video.context.pause()
        this.picture.context.pause()
      },
      scroll(e) {
        if (this.video?.context) {
          this.videoInView = e.detail.scrollTop < this.video.top + 120 && e.detail.scrollTop > this.video.top - this
            .viewHeight
        }
      },
      previewImage(item) {
        let urls = []
        this.imgList.forEach(e => {
          if (e.type == 1) {
            urls.push(e.url)
          }
        })
        let index = urls.findIndex(e => {
          return e == item.url
        })
        uni.previewImage({
          current: index,
          urls
        })
      },
      touchstart(e) {
        let touche = e.touches[0]
        this.videoDeviation.x = touche.screenX - this.videoCoordinates.x
        this.videoDeviation.y = touche.screenY - this.videoCoordinates.y
      },
      touchmove(e) {
        if (!this.moveStatus) return
        this.moveStatus = false
        let {
          screenHeight,
          screenWidth,
          safeArea,
          statusBarHeight
        } = this.sysInfo
        let touche = e.touches[0]
        let x  = touche.screenX - this.videoDeviation.x
        let y  = touche.screenY - this.videoDeviation.y
        if (y < 50) {
          y = 50
        } else if (y > screenHeight - 120) {
          y = screenHeight - 120
        }
        if (x < 130) {
          x = 130
        } else if (x > screenWidth - 240) {
          x = screenWidth - 240
        }
        this.videoCoordinates.x = x
        this.videoCoordinates.y = y
        setTimeout(() => {
          this.moveStatus = true
        }, 18)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .article {
    position: relative;

    &-imgList {
      padding-top: 30px;

      &-item {
        width: 210px;
        height: 120px;
      }
    }

    &-fixed {
      position: fixed;
      top: 49px;
      right: -210px;
      width: 210px;
      height: 120px;
    }
  }

  .picture-close {
    position: fixed;
    top: 49px;
    right: -210px;
    width: 20px;
    height: 20px;
  }
</style>
